<template>
  <div>
    <div>
      <top></top>
      <!-- 标签页 -->
      <div class="home-tab">
        <ly-tab
          v-model="tabId"
          :items="hometab"
          :options="options"
          @change="lytab"
        >
        </ly-tab>
      </div>
      <!-- 标签页 推荐 内容 -->
      <div>
        <!-- 轮播 封装组件 -->
        <homeSwiper></homeSwiper>
        <!-- 图标 封装组件 -->
        <homeIcons></homeIcons>
        <!-- 多重列表 封装组件 -->
        <multr></multr>
        <!-- 商品 封装组件 -->
        <recommend></recommend>
        <!-- 引入 其他商品 封装组件 -->
        <other></other>
        <!-- 引入 智能好物速递 封装组件 -->
        <intelligence></intelligence>
        <!-- 引入 返回顶部 封装组件 -->
        <gototop></gototop>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 头部 top 组件
import top from "../components/home/Top.vue";
// 引入 轮播 封装组件
import homeSwiper from "../components/home/homeSwiper.vue";
// 引入 图标 封装组件
import homeIcons from "../components/home/homeIcons.vue";
// 引入 商品 封装组件
import recommend from "../components/home/recommend.vue";
// 引入 多重列表 封装组件
import multr from "../components/home/multr.vue";
// 引入 返回顶部 封装组件
import gototop from "../components/home/gototop.vue";
import other from "../components/home/other.vue";
import intelligence from "../components/home/intelligence.vue";
export default {
  components: {
    top,
    homeSwiper,
    homeIcons,
    recommend,
    multr,
    gototop,
    other,
    intelligence,
  },
  data() {
    return {
      tabId: 0,
      hometab: [
        { label: "推荐" },
        { label: "智能" },
        { label: "电视" },
        { label: "家电" },
        { label: "笔记本" },
      ],
      options: {
        activeColor: "rgb(238, 94, 11)",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
    };
  },
  methods: {
    lytab(item, index) {
      console.log(index);
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.home-tab {
  background-color: rgb(182, 182, 182);
}
.ly-tab-list {
  background-color: rgb(182, 182, 182);
}
</style>
